<template>
    <page>
        <m-msg v-if="loading" class="white-bg">
            <img src="./12.gif" slot="icon" class="loading-img"/>
            <p>正在获取当前定位...</p>
        </m-msg>
        <template v-else>
            <div flex="box:justify cross:center" class="white-bg py20 px12">
                <div class="tc">
                    <p>近期位置调试时间</p>
                    <p>{{Date.now() | dateFormat('YYYY年MM月DD日')}}</p>
                </div>
                <div></div>
                <m-button class="md px30" @click.native="on_refresh">刷新当前位置</m-button>
            </div>
            <m-group align="right">
                <m-cell label="经度">{{coords.longitude}}</m-cell>
                <m-cell label="纬度">{{coords.latitude}}</m-cell>
                <m-cell label="位置精度">{{coords.accuracy}}</m-cell>
            </m-group>
            <div class="mt10 p12 white-bg bdb">
                <p>地址</p>
                <p class="mt8">{{address}}</p>
            </div>
            <template v-if="hasDiff">
                <div class="p12 white-bg bdb">
                    <p>推荐位置</p>
                    <p class="mt8">{{formatted_addresses.recommend}}</p>
                </div>
                <div class="p12 white-bg bdb">
                    <p>副选位置</p>
                    <p class="mt8">{{formatted_addresses.rough}}</p>
                </div>
            </template>
            <div class="p12 white-bg bdb" v-else>
                <p>位置</p>
                <p class="mt8">{{formatted_addresses.recommend}}</p>
            </div>
        </template>
    </page>
</template>
<script>
  import {getLocation} from '@/common/jssdk'
  import axios from 'axios'
  import jsonp from 'jsonp'
  export default {
    data() {
      return {
        loading: true,
        coords: {},
        address: null,
        formatted_addresses: {}
      }
    },
    created() {
      this.on_refresh()
    },
    computed: {
      // 是否有副选位置
      hasDiff () {
        return this.formatted_addresses.recommend !== this.formatted_addresses.rough
      }
    },
    methods: {
      async on_refresh() {
        try {
          this.loading = true
          let promise = await Promise.all([getLocation(), sleep(300)])
          this.coords = promise[0]
          this.geocoder()
        } catch (e) {
          m_toast('位置获取失败')
        } finally {
          this.loading = false
        }
      },
      async geocoder() {
        jsonp(`http://apis.map.qq.com/ws/geocoder/v1?location=${this.coords.latitude},${this.coords.longitude}&output=jsonp&key=OHJBZ-JFH3X-ONW4X-TYLJT-OXECE-UPFPQ`, null, (err, data) => {
          if (err) {
            console.error(err.message);
          } else {
            let {status, result} = data
            if (status != 0) return;
            this.address = result.address
            this.formatted_addresses = result.formatted_addresses
          }
        })
      }
    },
    beforeDestroy () {
      this.$vux.loading.hide()
    },
    components: {}
  }
</script>
<style type="text/scss" lang="scss" scoped>
    .loading-img {
        width: 220px;
    }
</style>
